<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 300px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <button>演示动画</button>
    <div class="box">box</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //animate（）
    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
        backgroundColor: "pink",//color属性不能作用
      });
    });
    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
      },3000);  //设置持续时间
    });

    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
      },"fast");  //设置持续时间
    });
  </script>
</html>
